<template>
  <div ref="indexBar" class="echats"></div>
</template>

<script>
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    indexData: Array,
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    indexData: {
      handler() {
        this.initChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      let echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      let mychart = this.$refs.indexBar;
      this.chart = echarts.init(mychart);
      let option = {
        color: ["#3aa1ff"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: 10,
          left: "2%",
          right: "2%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                color: "#666666",
              }
            },
            axisLine: {
              lineStyle: {
                color: "#d9d9d9"
              }
            }
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#666666",
                margin: 2
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: "#f1f1f1",
                type: "dashed"
              }
            }
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      };
      // 绘制图表
      this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echats {
  width: 100%;
  height: 90%;
}
</style>